<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="utf-8">
  <title>桂圆铺</title>
  <meta name="viewport"
    content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/amazeui.min.css">
  <link rel="stylesheet" href="./css/brand.css">
  <script>
    (function (window, document) {
      function resize() {
        var ww = window.innerWidth;
        if (ww > window.screen.width) {
          window.requestAnimationFrame(resize);
        } else {
          if (ww > 750) ww = 750;
          // 下面代码按照比例为100px = 1rem，此处一定要同pxToRem的转换比例
          document.documentElement.style.fontSize = ww * 100 / 750 + 'px';
        }
      }
      if (document.readyState !== 'loading') {
        resize();
      } else {
        document.addEventListener('DOMContentLoaded', resize);
      }
      window.addEventListener('resize', resize);
    })(window, document);
  </script>
</head>

<body>
  <div class="outer brand-container">
    <!-- star-nav -->
    <div class="nav-container">
      <nav class="top-nav">
        <img src="./images/logo.png" alt="" class='nav-logo'>
        <button>
          <span></span>
          <span></span>
          <span></span>
        </button>
      </nav>
      <!-- menu-list -->
      <ul class="nav-box am-list admin-sidebar-list" id="collapase-nav-1">
        <li class="am-panel">
          <a class='nav-item' data-am-collapse="{parent: '#collapase-nav-1', target: '#nav-1'}">
            关于桂源铺
            <i class="am-icon-plus am-fr am-margin-right"></i>
          </a>
          <!-- child-menu -->
          <ul class="am-list am-collapse admin-sidebar-sub" id="nav-1">
            <li><a href="#/userAdd"> 品牌背景 </a></li>
            <li><a href="#/userList/0">品牌核心价值 </a></li>
            <li><a href="#/userList/0">品牌标签 </a></li>
            <li><a href="#/userList/0">热点话题 </a></li>
          </ul>
        </li>
        <li class="am-panel">
          <a class='nav-item' data-am-collapse="{parent: '#collapase-nav-1', target: '#nav-2'}">
            港奶起源
            <i class="am-icon-plus am-fr am-margin-right"></i>
          </a>
          <ul class="am-list am-collapse admin-sidebar-sub" id="nav-2">
            <li><a href="#/companyAdd"> 添加单位（部门） </a></li>
            <li><a href="#/companyList/0"> 单位（部门）列表 </a></li>
          </ul>
        </li>
        <li class="am-panel">
          <a class='nav-item' data-am-collapse="{parent: '#collapase-nav-1', target: '#nav-3'}">
            品牌历程
            <i class="am-icon-plus am-fr am-margin-right"></i>
          </a>
          <ul class="am-list am-collapse admin-sidebar-sub" id="nav-3">
            <li>
              <a href="#/roleAdd">历程</a>
            </li>
          </ul>
        </li>
        <li class="am-panel">
          <a class='nav-item'>
            产品优势
            <i class="am-icon-plus am-fr am-margin-right"></i>
          </a>
        </li>
        <li class="am-panel">
          <a class='nav-item'>
            店铺展示
            <i class="am-icon-plus am-fr am-margin-right"></i>
          </a>
        </li>
        <li class="am-panel">
          <a class='nav-item'>
            更多资讯
            <i class="am-icon-plus am-fr am-margin-right"></i>
          </a>
        </li>
      </ul>
    </div><!-- end-nav -->
    <!-- start top-banner -->
    <div class="top-banner-box">
      <img src="./images/banner-1.png" alt="banner" class='banner-img'>
    </div>
    <!-- collapse menu -->
    <div class="collapse-menu" id="collapseNav" data-am-sticky>
      <div class="collase-button" data-am-collapse="{target: '#collapseMenu'}">
        <span class="index-num">0.1</span>
        <span>品牌背景</span>
        <span class="icons am-icon-chevron-down"></span>
      </div>
      <div class="menu-cotent">
        <nav>
          <ul id="collapseMenu" class="am-nav am-collapse">
            <li class="am-active"><a href=""><span class="index">01</span>品牌背景</a></li>
            <li><a href=""><span class="index">02</span>品牌核心价值</a></li>
            <li><a href=""><span class="index">03</span>品牌标签</a></li>
            <li><a href=""><span class="index">04</span>热点话题</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <!--end collapse menu-->
    <!-- start main-content -->
    <div class="man-container">
      <!-- banner-box -->
      <div class="brand-box">
        <img src="./images/brand-1.jpg" alt="" class="brand-1">
        <div class="img-inline-box">
          <img src="./images/brand-2.png" alt="">
          <img src="./images/brand-3.jpg" alt="">
        </div>
      </div>
      <!-- brand-text -->
      <div class="brand-text-box">
        <img src="./images/about-us.png" alt="" class="us-title">
        <p class="us-info">
          创立于2011年11月，从当初一家10㎡的小店已发展为全国近400家门店的连锁餐饮品牌。传承港式经典手工拉茶技术，坚持口味不断研发与创新，是桂源铺一直以来的坚持。<br><br>
          2019年，桂源铺继续深耕柠茶系列，立志打造成“有点不一样的港式柠茶品牌”。在稳步发展扩张的前提下，桂源铺希望通过创新研发能力和营销服务理念，一方面升级产品的创意包装吸引更为年轻的消费者，另一方面借鉴市场潮流结合自身特点研发年轻人更喜爱的产品，让产品深入年轻市场。在品牌打造过程中，通过其他行业的跨界合作，从而让桂源铺受到新一代年轻群体的关注。
        </p>
      </div>
    </div>
    <footer class="footer-box">
      <nav class="footer-nav">
        <ul>
          <li class="line"><a href=""><span class="icons"></span>供应商</a></li>
          <li class="line"><a href=""><span class="icons"></span>加盟商</a></li>
          <li><a href=""><span class="icons"></span>员工通道</a></li>
        </ul>
      </nav>
      <div class="address-box">
        <div class="info-text">
          All rights reserved 2018 © 桂源铺 沪ICP备0000000号
          <br>技术支持：柏优传媒
        </div>
        <div class="icon-box">
          <span class="am-icon-weixin"></span>
          <span class="am-icon-weibo"></span>
          <span class="am-icon-qq"></span>
        </div>
      </div>
    </footer>
  </div>
  <script src="./js/jquery-1.8.2.min.js"></script>
  <script src="./js/amazeui.min.js"></script>
  <script src="./js/swiper.min.js"></script>
  <script>
    var btn = $('.top-nav').children('button')
      , spa = btn.children('span')
      , ul = $('.nav-container').children('.nav-box')
      , logos = $('.top-nav').children('.nav-logo')
    // 导航按钮切换
    btn.on('click', function () {
      $('.nav-container').toggleClass('active-bg')
      if (!$(spa[0]).hasClass('spa1')) {
        spa[0].className = 'spa1';
        spa[1].style.display = 'none';
        spa[2].className = 'spa3';
        logos.attr('src', './images/logo-ff.png')
        $('.nav-container')[0].style.height = 80 + ul[0].offsetHeight + 'px';
      } else {
        spa[0].className = '';
        spa[1].style.display = 'block';
        spa[2].className = '';
        $('.nav-container')[0].style.height = 1.05 + 'rem';
        logos.attr('src', './images/logo.png')
      }
    });
    $(document).on('click', '.nav-item', function () {
      setTimeout(function () {
        $('.nav-container')[0].style.height = 80 + ul[0].offsetHeight + 'px';
      }, 150)
    })
    // 默认第一个折叠开启
    $('#nav-1').collapse('open')
    // 二级折叠菜单展开添加样式
    $('#collapseMenu').on('open.collapse.amui', function () {
      $('.menu-cotent').addClass('active')
    }).on('close.collapse.amui', function() {
      $('.menu-cotent').removeClass('active')
    });
  </script>
  <!-- swiper -->
  <script>
    $(document).ready(function () {
      // 顶部轮播
      var topFocus = new Swiper('.swiper-container', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      })
    })
  </script>
</body>

</html>
